import React from "react";
// import SearchTable from "components/searchTable/SearchTable.jsx";
import { Table } from "antd";
// import { openNotificationWithIcon } from "utils/comm";
import { connect } from "dva";
import queryString from "query-string";
import Link from "umi/link";
// import MessageBase from "./components/Base";
import Search from "./components/Search";
import styles from "./index.less";

const titleStyle = {
  maxWidth: 222,
  overflow: "hidden",
  textOverflow: "ellipsis",
  whiteSpace: "nowrap",
};
const readStatus = ["未读", "已读"];

@connect(({ PageNotice, loading }) => ({
  loading,
  noticePageData: PageNotice.noticePageData,
  msgTypes: PageNotice.noticeTypes,
}))
class MessageList extends React.Component {
  state = {
    page: {
      pageNum: 1,
      pageSize: 10,
      msgType: "",
      senderName: "",
      status: "0", // 默认查询未读
      noticeList: [],
    },
  };

  componentDidMount() {
    const { dispatch } = this.props;
    this.initNoticeList();
    dispatch({ type: "PageNotice/getNoticeType" });
  }

  getTableColumns = () => [
    {
      title: "序号",
      dataIndex: "id",
      render: (value, record, index) => {
        const {
          page: { pageNum, pageSize },
        } = this.state;
        return (pageNum - 1) * pageSize + index + 1;
      },
    },
    {
      title: "标题",
      dataIndex: "msgTitle",
      render: (value) => <span style={titleStyle}>{value}</span>,
    },
    // { title: "类型", dataIndex: "msgTypeDescr" },
    {
      title: "类型",
      dataIndex: "msgType",
      render: (v) => {
        const { msgTypes } = this.props;
        const e = msgTypes.find((item)=> (item.key === v));
        return e && e.value || '';
      },
    },
    // 未读：0， 已读：1
    {
      title: "状态",
      dataIndex: "status",
      render: (v) => (v !== undefined ? readStatus[v] : ""),
    },
    { title: "发送时间", dataIndex: "createTime" },
    {
      title: "来源",
      dataIndex: "processName",
      render: (value, record) => {
        const { processInstanceId, processName, id } = record;
        return (
          <Link
            to={{
              pathname: "/noticeflowdetail",
              search: queryString.stringify({
                processInstanceId,
                actionId: id,
              }),
            }}
          >
            {processName}
          </Link>
        );
      },
    },
    {
      title: "操作",
      dataIndex: "processInstanceId",
      render: (value, record) => (
        <Link
          to={{
            pathname: "/message/detail",
            search: queryString.stringify({
              processInstanceId: value,
              actionId: record.id,
            }),
          }}
          onClick={() => this.updateReadStatus(record.id, record.status)}
        >
          详情
        </Link>
      ),
    },
  ];

  getNoticeList = () => {
    const { dispatch } = this.props;
    const params = { pageNum: 1, pageSize: 10, status: 0 };
    dispatch({ type: "PageNotice/getNoticeList", payload: params });
  };

  updateReadStatus = (id, status) => {
    const { dispatch } = this.props;
    if (!status) {
      dispatch({
        type: "PageNotice/updateReadStatus",
        payload: { ids: [id] },
      }).then(({ errCode, errMsg, errortext }) => {
        if (errCode === 0) {
          this.getNoticeList();
          return;
        }
        this.openNotificationWithIcon(
          "error",
          "",
          errMsg || errortext || "标记为已读失败",
        );
      });
    }
  };

  // 页码页数改变
  handlePageChange = (pageNum, pageSize) => {
    this.setState(
      (prev) => ({ page: { ...prev.page, pageNum, pageSize } }),
      this.initNoticeList,
    );
  };

  handleSearch = (values) => {
    // const { page } = this.state;
    // const { dispatch } = this.props;
    this.setState(
      (prev) => ({ page: { ...prev.page, pageNum: 1, ...values } }),
      this.initNoticeList,
    );
    // this.setState({ page: { ...page, pageNum: 1 } }, () => {
    //   dispatch({ type: "PageNotice/getNoticeListPage", payload: searchParams });
    // });
  };

  initNoticeList = () => {
    const { page } = this.state;
    const { dispatch } = this.props;
    dispatch({ type: "PageNotice/getNoticeListPage", payload: page }).then(
      ({ errCode, datas, totalCount }) => {
        if (errCode === 0) {
          this.setState({ noticeList: datas, totalCount });
        }
      },
    );
  };

  render() {
    const { msgTypes, loading } = this.props;

    const {
      page: { pageNum, pageSize },
      noticeList,
      totalCount,
    } = this.state;

    return (
      <div className={styles.table}>
        <Search handleSearch={this.handleSearch} msgTypes={msgTypes} />
        <Table
          // rowKey="id"
          columns={this.getTableColumns()}
          dataSource={noticeList}
          loading={loading.effects["PageNotice/getNoticeListPage"]}
          pagination={{
            current: pageNum,
            pageSize,
            total: totalCount,
            onChange: this.handlePageChange,
            onShowSizeChange: this.handlePageChange,
            pageSizeOptions: ["10", "20", "30", "40"],
            showQuickJumper: {
              goButton: <span className={styles.goPage}>确定</span>,
            },
            showSizeChanger: true,
            showTotal: (total) => `共有${total}条`,
          }}
        />
      </div>
    );
  }
}

export default MessageList;
